import React, { Component } from 'react';
import { connect } from 'dva';
import {
  PlusCircleOutlined,
  MinusCircleOutlined,
  UploadOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import {
  Card,
  Form,
  Row,
  Col,
  Input,
  Select,
  Dropdown,
  Menu,
  Space,
  Button,
  Radio,
  InputNumber,
  Upload,
  message,
  DatePicker,
  Descriptions,
} from 'antd';
import PropTypes from 'prop-types';
import { FormInstance } from 'antd/lib/form';
import styles from './index.less';
import commonFormStyles from '../../../components/common/PateoSearchForm/style.less';
import router from 'umi/router';
import { getDictOptionsByCode } from '@/support/common';
import { transferOption } from '@/support/utils';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import moment from 'moment';
import DirTemplate from './dirTemplate';
import { isJson } from '@/utils/common';

const FormItem = Form.Item;

const mapStateToProps = (state: any) => ({
  contentMng: state.contentMng,
  menu: state.menu,
  loading: state.loading.models['contentMng'],
});

const TitleHash = {
  edit: '编辑模板',
  add: '新建模板',
  view: '查看模板',
};
const disabledDate = (current: any) => {
  // Can not select days before today and today
  return current && current < moment().endOf('day');
};
class ContentTempDetail extends Component<any, any> {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.any,
  };
  formRef = React.createRef<FormInstance>();
  tempFormRef = React.createRef<FormInstance>();
  pageFormRef = React.createRef<FormInstance>();
  dirTemplateRef = React.createRef<{ form: FormInstance }>();

  tempInfo = sessionStorage.getItem('tempInfo');
  state = {
    tempId: this.tempInfo && JSON.parse(this.tempInfo).tempId,
    // isEdit: true,
    isEdit: !!(this.tempInfo && JSON.parse(this.tempInfo).isEdit),
    viewStatus: 'add',
    formValues: this.tempInfo && JSON.parse(this.tempInfo).data,
    currentTempTypeList: [] as Array<any>, //  内容形式，1：纯文本；2：富文本；3：图片；4：文件
    textInputType: 0, // 0:单行 1：多行
    saveBtnDisabled: true,
    dirTemplateList: [],
  };
  componentDidMount() {
    const { tempId, isEdit, formValues } = this.state;
    if (tempId) {
      setTimeout(() => {
        this.formRef.current?.setFieldsValue({
          ...formValues,
          displayTerminalCode: formValues?.displayTerminalCode + '',
          touchWayCode: formValues?.touchWayCode + '',
        });
        this.pageFormRef.current?.setFieldsValue({
          ...formValues.pageConfig,
          onlineTime:
            formValues.pageConfig.onlineTime &&
            moment(formValues.pageConfig.onlineTime, 'YYYY-MM-DD'),
          offlineTime:
            formValues.pageConfig.offlineTime &&
            moment(formValues.pageConfig.offlineTime, 'YYYY-MM-DD'),
        });
        if (formValues?.templateConfig) {
          const configData = JSON.parse(formValues.templateConfig);
          this.tempFormRef.current?.setFieldsValue({
            temps: configData,
          });
          this.setState({
            currentTempTypeList: configData.map((config: any) => config.type),
            saveBtnDisabled: !this.tempFormRef?.current?.getFieldsValue().temps?.length,
          });
        }
        if (formValues?.dirConfig) {
          const dirConfigList = isJson(formValues.dirConfig)
            ? JSON.parse(formValues.dirConfig)
            : [];
          this.setState({
            dirTemplateList: dirConfigList,
          });
        }
      }, 10);
    }

    if (isEdit) {
      if (!!tempId) {
        this.setState({ viewStatus: 'edit' });
      } else {
        this.setState({ viewStatus: 'add' });
      }
    } else {
      this.setState({ viewStatus: 'view' });
    }
  }
  handleAddTemp = (item: any, addFunc: Function) => {
    const tempTypeList = this.state.currentTempTypeList;
    tempTypeList.push(item.key);

    this.setState({
      currentTempTypeList: tempTypeList,
      saveBtnDisabled: !tempTypeList?.length,
    });
    let defaultValues;
    switch (item.key + '') {
      case '1':
        defaultValues = {
          type: item.key,
          label_name: '文本标签',
          is_mutilate: 0,
          is_require: 1,
          max_length: null,
        };
        break;
      case '2':
        defaultValues = {
          type: item.key,
          label_name: '文本标签',
          is_require: 1,
        };
        break;
      case '3':
        defaultValues = {
          type: item.key,
          label_name: '上传图片标签',
          is_require: 1,
          image_format: '',
          image_length: null,
          image_width: null,
          graphics: null,
          image_size: null,
        };
        break;
      case '4':
        defaultValues = {
          type: item.key,
          label_name: '上传文件标签',
          is_require: 1,
          file_format: '',
          file_size: null,
        };
        break;
    }
    addFunc(defaultValues, tempTypeList.length - 1);
  };

  handleSubmit = async () => {
    const { dirTemplateList } = this.state;
    // 模板数据校验
    const templateValues = await this.formRef.current?.validateFields();
    const contentTemplateValues = await this.tempFormRef.current?.validateFields(); // contentTemplateValues

    const pageConfParams = {
      ...this.pageFormRef?.current?.getFieldsValue(),
      onlineTime: this.pageFormRef?.current?.getFieldValue('onlineTime')
        ? moment(this.pageFormRef?.current?.getFieldValue('onlineTime')).format(
            'YYYY-MM-DD HH:mm:ss',
          )
        : '',
      offlineTime: this.pageFormRef?.current?.getFieldValue('offlineTime')
        ? moment(this.pageFormRef?.current?.getFieldValue('offlineTime')).format(
            'YYYY-MM-DD HH:mm:ss',
          )
        : '',
    };
    const params = {
      contentItemSid: sessionStorage.getItem('contentId'),
      ...contentTemplateValues,
      ...templateValues,
      labelContent: this.formRef?.current?.getFieldValue('labelContent')?.replace(/；/gi, ';'),
      templateConfig: JSON.stringify(this.tempFormRef?.current?.getFieldsValue()?.temps),
      pageConfig: { ...pageConfParams },
    };
    if (dirTemplateList.length > 0) {
      const dirTemplateValue = await this.dirTemplateRef.current?.form.validateFields();
      params.dirConfig = JSON.stringify(dirTemplateValue.dirConfig);
    }

    const { dispatch } = this.props;
    const { tempId } = this.state;
    const url = tempId ? 'contentMng/editTempItem' : 'contentMng/addTempItem';

    dispatch({
      type: url,
      payload: { ...params, sid: tempId },
      callback: (res: any) => {
        message.success('保存成功！');
        sessionStorage.removeItem('tempInfo');
        router.push('/contentMng/contentTempList');
      },
    });
  };
  handleCancel = () => {
    sessionStorage.removeItem('tempInfo');
    router.push('/contentMng/contentTempList');
  };
  renderFormItem = () => {
    const {
      menu: { dicData },
    } = this.props;
    const { isEdit } = this.state;

    const displayTerminalOptions = getDictOptionsByCode(dicData, 'displayTerminalOptions');
    const touchWayOptions = getDictOptionsByCode(dicData, 'touchWayCode');
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    return (
      <Form ref={this.formRef}>
        <Row gutter={24}>
          <Col span={6} key="templateCode">
            <FormItem
              // {...formItemLayout}
              name="templateCode"
              label="模板ID"
              rules={[{ required: true, message: '请输入模板ID' }]}
            >
              <Input
                maxLength={100}
                placeholder="请输入模板ID"
                allowClear
                disabled={!isEdit}
                autoComplete={'off'}
              />
            </FormItem>
          </Col>
          <Col span={6} key="templateName">
            <FormItem
              // {...formItemLayout}
              name="templateName"
              label="模板名称"
              rules={[{ required: true, message: '请输入模板名称' }]}
            >
              <Input
                maxLength={200}
                placeholder="请输入模板名称"
                allowClear
                disabled={!isEdit}
                autoComplete={'off'}
              />
            </FormItem>
          </Col>
          <Col span={6} key="displayTerminalCode">
            <FormItem
              // {...formItemLayout}
              name="displayTerminalCode"
              label="展现终端"
              rules={[{ required: true, message: '请选择展现终端' }]}
            >
              <Select showSearch={false} allowClear placeholder="请选择" disabled={!isEdit}>
                {transferOption(displayTerminalOptions)}
              </Select>
            </FormItem>
          </Col>
          <Col span={6} key="touchWayCode">
            <FormItem
              // {...formItemLayout}
              name="touchWayCode"
              label="触达方式"
              rules={[{ required: true, message: '请选择触达方式' }]}
            >
              <Select showSearch={false} allowClear placeholder="请选择" disabled={!isEdit}>
                {transferOption(touchWayOptions)}
              </Select>
            </FormItem>
          </Col>
          <Col span={12} key="labelContent">
            <FormItem
              // labelCol={{
              //   xs: { span: 24 },
              //   sm: { span: 3 },
              // }}
              // wrapperCol={{
              //   xs: { span: 24 },
              //   sm: { span: 21 },
              // }}
              name="labelContent"
              label="内容项标签"
              help="多个标签间用分号分隔"
              rules={[
                { whitespace: true },
                // {
                //   validator: async (_, names): Promise<any> => {
                //     const regex = new RegExp(/[\n\s+；;]/g);
                //     if (names && !regex.test(names)) {
                //       return Promise.reject(new Error('多个标签间请用分号分隔'));
                //     }
                //   },
                // },
              ]}
            >
              <Input maxLength={200} placeholder="请输入内容项标签" allowClear disabled={!isEdit} />
            </FormItem>
          </Col>
          <Col span={12} key="contentVersionUnique">
            <FormItem
              // {...formItemLayout}
              name="contentVersionUnique"
              label="内容版本号(是否唯一)"
            >
              <Radio.Group>
                <Radio value={1}>唯一</Radio>
                <Radio value={0}>不唯一</Radio>
              </Radio.Group>
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  };
  checkImgFormat = (rule: any, value: any, callback: any) => {
    const reg = /\.(png|jpg|gif|jpeg|webp)$/;
    if (value) {
      const regex = new RegExp(reg);
      value.split(';').forEach(val => {
        if (!regex.test(val)) {
          return Promise.reject(`请输入正确的图片格式，多个用分号（;）分隔`);
        }
      });
    }
    return Promise.resolve();
  };
  insertTemp = (type: string | number, name: any): any => {
    const { isEdit } = this.state;
    // const {
    //   contentMng: { keyList },
    // } = this.props;
    // const keyList = [{ label: 'title', value: 'title' }];
    const onMultiChange = (e: any) => {
      const val = e.target.value;
      this.setState({
        textInputType: val,
      });
    };
    const contentKeys = getDictOptionsByCode(this.context.dicData, 'contentKeys');

    if (type == '1') {
      return (
        <Row gutter={12}>
          <Col span={3}>
            <Form.Item
              name={[name, 'key']}
              key="key"
              rules={[
                {
                  required: true,
                  message: '请选择字段Key',
                },
              ]}
            >
              <Select showSearch={false} allowClear placeholder="请选择字段Key" disabled={!isEdit}>
                {transferOption(contentKeys)}
              </Select>
            </Form.Item>
          </Col>
          <Col span={2}>
            <Form.Item
              name={[name, 'label_name']}
              key="label_name"
              rules={[
                {
                  validator: async (_, names): Promise<any> => {
                    if (!names) {
                      return Promise.reject(new Error('请填写文本标签'));
                    }
                  },
                },
              ]}
            >
              <Input readOnly placeholder="文本标签" bordered={false} disabled={!isEdit} />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item>
              {this.state.textInputType === 0 ? (
                <Input placeholder="输入内容" readOnly />
              ) : (
                <Input.TextArea placeholder="输入内容" readOnly />
              )}
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name={[name, 'is_mutilate']} key="is_mutilate">
              <Radio.Group onChange={onMultiChange} disabled={!isEdit}>
                <Radio value={0}>单行</Radio>
                <Radio value={1}>多行</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={10}>
            <Row gutter={12} wrap={false}>
              <Col flex="120px">
                <Form.Item>限定条件1：</Form.Item>
              </Col>
              <Col flex="auto">
                <Form.Item name={[name, 'is_require']} key="is_require" label="是否必填">
                  <Radio.Group disabled={!isEdit}>
                    <Radio value={1}>必填项</Radio>
                    <Radio value={0}>非必填项</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件2：</Form.Item>
              </Col>
              <Col flex="1 1 auto">
                <Form.Item
                  name={[name, 'max_length']}
                  key="max_length"
                  label="最长不超过"
                  colon={false}
                >
                  <InputNumber min={0} style={{ width: '100%' }} disabled={!isEdit} />
                </Form.Item>
              </Col>
              <Col flex="0 0 80px">
                <Form.Item>个字符</Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>
      );
    } else if (type == '2') {
      return (
        <Row gutter={12}>
          <Col span={3}>
            <Form.Item name={[name, 'key']} key="key">
              <Select showSearch={false} allowClear placeholder="请选择字段Key" disabled={!isEdit}>
                {transferOption(contentKeys)}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name={[name, 'label_name']} key="label_name" rules={[]}>
              文本标签
            </Form.Item>
          </Col>
          <Col span={12}>
            <Row gutter={12} wrap={false}>
              <Col flex="120px">
                <Form.Item>限定条件1：</Form.Item>
              </Col>
              <Col flex="auto">
                <Form.Item name={[name, 'is_require']} key="is_require" label="是否必填">
                  <Radio.Group disabled={!isEdit}>
                    <Radio value={1}>必填项</Radio>
                    <Radio value={0}>非必填项</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col span={24}>
            <BraftEditor
              className="my-editor"
              style={{ border: '1px solid #cecece', borderRadius: '5px' }}
              readOnly
            />
          </Col>
        </Row>
      );
    } else if (type == '3') {
      return (
        <Row gutter={12}>
          <Col span={3}>
            <Form.Item name={[name, 'key']} key="key">
              <Select showSearch={false} allowClear placeholder="请选择字段Key" disabled={!isEdit}>
                {transferOption(contentKeys)}
              </Select>
            </Form.Item>
          </Col>
          <Col span={3}>
            <Form.Item
              name={[name, 'label_name']}
              key="label_name"
              rules={[
                {
                  validator: async (_, names): Promise<any> => {
                    if (!names) {
                      return Promise.reject(new Error('请填写上传图片标签'));
                    }
                  },
                },
              ]}
            >
              <Input placeholder="上传图片标签" bordered={false} disabled={!isEdit} />
            </Form.Item>
          </Col>
          <Col span={3}>
            <Form.Item>
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                disabled
              >
                <div>
                  <PlusOutlined />
                  <div style={{ marginTop: 8 }}>上传图片</div>
                </div>
              </Upload>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Row gutter={12} wrap={false}>
              <Col flex="120px">
                <Form.Item>限定条件1：</Form.Item>
              </Col>
              <Col flex="auto">
                <Form.Item name={[name, 'is_require']} key="is_require" label="是否必填">
                  <Radio.Group disabled={!isEdit}>
                    <Radio value={1}>必填项</Radio>
                    <Radio value={0}>非必填项</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件2：</Form.Item>
              </Col>
              <Col flex="1 1 auto">
                <Form.Item
                  name={[name, 'image_format']}
                  key="image_format"
                  label="图片格式"
                  rules={[
                    {
                      validator: async (_, value): Promise<any> => {
                        const reg = /\.(png|jpg|gif|jpeg|webp)$/;
                        if (value) {
                          const regex = new RegExp(reg);
                          value.split(';').forEach(val => {
                            if (!regex.test(val)) {
                              return Promise.reject(`请输入正确的图片格式，多个用分号（;）分隔`);
                            }
                          });
                        }
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <Input style={{ width: '100%' }} disabled={!isEdit} />
                </Form.Item>
              </Col>
              <Col flex="0 0 220px">
                <Form.Item>格式以.开头，多个请用英文符号分号（;）分隔，例：.png;.jpg</Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件3：</Form.Item>
              </Col>
              <Col flex="0 0 80px">
                <Form.Item>图片尺寸: </Form.Item>
              </Col>
              <Col flex="auto">
                <Form.Item name={[name, 'image_length']} key="image_length" label="长">
                  <Input
                    type="number"
                    min={0}
                    style={{ width: '100%' }}
                    suffix="px"
                    disabled={!isEdit}
                  />
                </Form.Item>
              </Col>
              <Col flex="auto">
                <Form.Item name={[name, 'image_width']} key="image_width" label="宽">
                  <Input
                    type="number"
                    min={0}
                    style={{ width: '100%' }}
                    suffix="px"
                    disabled={!isEdit}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件4：</Form.Item>
              </Col>
              <Col flex="0 0 80px">
                <Form.Item>图片数量: </Form.Item>
              </Col>
              <Col flex="1 1 auto">
                <Form.Item name={[name, 'graphics']} key="graphics" label="不超过" colon={false}>
                  <InputNumber
                    min={1}
                    style={{ width: '100%' }}
                    addonAfter={'张'}
                    disabled={!isEdit}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件5：</Form.Item>
              </Col>
              <Col flex="0 0 80px">
                <Form.Item>图片大小: </Form.Item>
              </Col>
              <Col flex="1 1 auto">
                <Form.Item
                  name={[name, 'image_size']}
                  key="image_size"
                  label="不超过"
                  colon={false}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    addonAfter={'Mb'}
                    disabled={!isEdit}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>
      );
    } else if (type == '4') {
      return (
        <Row gutter={12}>
          <Col span={3}>
            <Form.Item name={[name, 'key']} key="key">
              <Select showSearch={false} allowClear placeholder="请选择字段Key" disabled={!isEdit}>
                {transferOption(contentKeys)}
              </Select>
            </Form.Item>
          </Col>
          <Col span={3}>
            <Form.Item
              name={[name, 'label_name']}
              key="label_name"
              rules={[
                {
                  validator: async (_, names): Promise<any> => {
                    if (!names) {
                      return Promise.reject(new Error('请填写上传文件标签'));
                    }
                  },
                },
              ]}
            >
              <Input placeholder="上传文件标签" bordered={false} disabled={!isEdit} />
            </Form.Item>
          </Col>
          <Col span={3}>
            <Form.Item>
              <Upload name="logo" disabled>
                <Button icon={<UploadOutlined />}>上传文件</Button>
              </Upload>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Row gutter={12} wrap={false}>
              <Col flex="120px">
                <Form.Item>限定条件1：</Form.Item>
              </Col>
              <Col flex="auto">
                <Form.Item name={[name, 'is_require']} key="is_require" label="是否必填">
                  <Radio.Group disabled={!isEdit}>
                    <Radio value={1}>必填项</Radio>
                    <Radio value={0}>非必填项</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件2：</Form.Item>
              </Col>
              <Col flex="1 1 auto">
                <Form.Item name={[name, 'file_format']} key="file_format" label="文件格式">
                  <Input style={{ width: '100%' }} disabled={!isEdit} />
                </Form.Item>
              </Col>
              <Col flex="0 0 220px">
                <Form.Item>格式以.开头，多个请用英文符号分号（;）分隔，例：.zip;.docx</Form.Item>
              </Col>
            </Row>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 120px">
                <Form.Item>限定条件3：</Form.Item>
              </Col>
              <Col flex="0 0 80px">
                <Form.Item>文件大小: </Form.Item>
              </Col>
              <Col flex="1 1 auto">
                <Form.Item name={[name, 'file_size']} key="file_size" label="不超过" colon={false}>
                  <Input
                    type="number"
                    min={0}
                    style={{ width: '100%' }}
                    suffix="Mb"
                    disabled={!isEdit}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>
      );
    }
  };

  renderTempForm = () => {
    const { isEdit, saveBtnDisabled } = this.state;
    return (
      <Form
        ref={this.tempFormRef}
        name="dynamic_form_temp_item"
        // onFinish={this.handleSubmit}
        autoComplete="off"
      >
        <Form.List name="temps">
          {(fields, { add, remove }) => {
            return (
              <>
                <Form.Item>
                  {this.state.isEdit ? (
                    <Dropdown
                      key={'content-mode'}
                      overlay={
                        <Menu
                          onClick={(e: any) => {
                            this.handleAddTemp(e, add);
                          }}
                        >
                          <Menu.Item key={1}>
                            <span>文本框</span>
                          </Menu.Item>
                          <Menu.Item key={2}>
                            <span>富文本框</span>
                          </Menu.Item>
                          <Menu.Item key={3}>
                            <span>上传图片</span>
                          </Menu.Item>
                          <Menu.Item key={4}>
                            <span>上传文件</span>
                          </Menu.Item>
                        </Menu>
                      }
                      trigger={['click']}
                      placement="bottom"
                    >
                      <Button>
                        <PlusCircleOutlined /> 添加内容形式
                      </Button>
                    </Dropdown>
                  ) : null}
                </Form.Item>
                {fields.map(({ key, name, ...restField }) => {
                  return (
                    <Row>
                      <Col span={24}>
                        <Space
                          key={key}
                          style={{
                            display: 'flex',
                            marginBottom: 8,
                          }}
                          align="baseline"
                        >
                          {this.insertTemp(this.state.currentTempTypeList[name], name)}
                          {isEdit ? (
                            <MinusCircleOutlined
                              onClick={() => {
                                const tempTypeList = this.state.currentTempTypeList;
                                tempTypeList.splice(name, 1);
                                this.setState({
                                  currentTempTypeList: tempTypeList,
                                  saveBtnDisabled: !tempTypeList.length,
                                });
                                remove(name);
                              }}
                            />
                          ) : null}
                        </Space>
                      </Col>
                    </Row>
                  );
                })}
              </>
            );
          }}
        </Form.List>
      </Form>
    );
  };

  renderPageConfFormItem = () => {
    const {
      menu: { dicData },
    } = this.props;
    const { isEdit } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <Form ref={this.pageFormRef}>
        <Row gutter={24}>
          <Col span={6} key="onlineTime">
            <FormItem labelAlign="left" name="onlineTime" label="上线时间">
              <DatePicker
                allowClear
                placeholder="请选择日期"
                style={{ width: '100%' }}
                // disabledDate={disabledDate}
                disabled={!isEdit}
              />
            </FormItem>
          </Col>
          <Col span={6} key="offlineTime">
            <FormItem labelAlign="left" name="offlineTime" label="下线时间">
              <DatePicker
                allowClear
                placeholder="请选择日期"
                style={{ width: '100%' }}
                // disabledDate={disabledDate}
                disabled={!isEdit}
              />
            </FormItem>
          </Col>
          <Col span={6} key="versionNo">
            <FormItem labelAlign="left" name="versionNo" label="当前版本号">
              <Input allowClear disabled={!isEdit} />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col flex="0 0 400px">
            <FormItem
              labelCol={{
                sm: { span: 7 },
              }}
              wrapperCol={{
                sm: { span: 16 },
              }}
              labelAlign="left"
              name="closeMode"
              label="页面关闭方式"
            >
              <Radio.Group style={{ width: '100%' }} disabled={!isEdit}>
                <Radio value={1}>用户点击关闭</Radio>
                <Radio value={2}>倒计时关闭</Radio>
              </Radio.Group>
            </FormItem>
          </Col>
          <Col>
            <Row gutter={12} wrap={false}>
              <Col flex="0 0 100px">
                <FormItem
                  wrapperCol={{
                    sm: { span: 22 },
                  }}
                  name="countDownTime"
                >
                  <InputNumber min={0} style={{ width: '100%' }} disabled={!isEdit} />
                </FormItem>
              </Col>
              <Col flex="0 0 20px">
                <Form.Item>秒</Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={3}>
            <Form.Item>页面弹出方式：</Form.Item>
          </Col>
          <Col span={12}>
            <Row gutter={12} wrap={false}>
              <Col span={12}>
                <Row gutter={12} wrap={false}>
                  <Col flex="1 1 auto">
                    <Form.Item name="messageInterval" label="消息展现间隔">
                      <InputNumber min={0} style={{ width: '100%' }} disabled={!isEdit} />
                    </Form.Item>
                  </Col>
                  <Col flex="0 0 80px">
                    <Form.Item>小时/次</Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col span={12}>
                <Row gutter={12} wrap={false}>
                  <Col flex="1 1 auto">
                    <Form.Item name="maxDailyFrequency" label="每日次数上限">
                      <InputNumber min={0} style={{ width: '100%' }} disabled={!isEdit} />
                    </Form.Item>
                  </Col>
                  <Col flex="0 0 80px">
                    <Form.Item>次/天</Form.Item>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </Form>
    );
  };

  setDirTempList = (dirTempList: any[]) => {
    this.setState({ dirTemplateList: dirTempList });
  };

  render() {
    const {
      menu: { dicData },
    } = this.props;
    const { viewStatus, dirTemplateList } = this.state;
    const title = TitleHash[viewStatus];
    return (
      <div className={styles.container}>
        <Card title={title} bordered={false}></Card>
        <Card bordered={false}>
          <div className={commonFormStyles.tableListForm}>{this.renderFormItem()}</div>
          <div className={styles.tempWrapper}>
            <DirTemplate
              ref={this.dirTemplateRef}
              isEdit={this.state.isEdit}
              dicData={dicData}
              dirTemplateList={dirTemplateList}
              setDirTempList={this.setDirTempList}
            />
          </div>
          <div className={styles.tempWrapper}>{this.renderTempForm()}</div>
        </Card>
        <Card title="页面配置" bordered={false}></Card>
        <Card bordered={false}>{this.renderPageConfFormItem()}</Card>
        <Card bordered={false}>
          <div style={{ display: 'flex' }}>
            <div style={{ width: '85px' }}>说明：</div>
            <div>
              1）间隔(小时)：为空，每次开机弹一次，弹的次数跟上限有关。若仅填写间隔，表示每隔N小时都会展现一次；间隔计算在一个开机周期内有效，再次开机后，间隔以全部展示过为起点开始计算。(例如：间隔1，次数4，8点开机后展示，9点再次显示，9点15关机，9点30开机，再次展示，10点半再次展示，今日次数展示完毕，再次开机或到间隔时间都不展示)。
              <br />
              2）次数上限：为空，按照间隔来弹，每次开机时就是间隔计算的起点，若仅填写次数上限表示每天最多展现N次。间隔和次数上限全为空的场合，则开机弹一次，每次开机都弹。
              <br />
              3）弹窗间隔和次数上限的有效区间是当天的0:00:00 ~ 23:59:59。
            </div>
          </div>
        </Card>
        <Card bordered={false}>
          <>
            {this.state.isEdit ? (
              <Button
                type="primary"
                onClick={this.handleSubmit}
                disabled={this.state.saveBtnDisabled}
              >
                保存
              </Button>
            ) : null}

            <Button htmlType="button" style={{ margin: '0 8px' }} onClick={this.handleCancel}>
              取消
            </Button>
          </>
        </Card>
      </div>
    );
  }
}
export default connect(mapStateToProps)(ContentTempDetail);
